<template>
  <div>
    <el-table :data="courseList.filter((data) => !search || data.Name.toLowerCase().includes(search.toLowerCase()))" style="width: 100%" :default-sort="{ prop: 'Class', order: 'descending' }">
      <el-table-column label="名称" prop="Name" sortable> </el-table-column>
      <el-table-column label="类型" prop="Class" sortable> </el-table-column>
      <el-table-column label="学分" prop="Credit" sortable> </el-table-column>
      <el-table-column label="周几" prop="Day" sortable> </el-table-column>
      <el-table-column label="第几节" prop="Time" sortable> </el-table-column>
      <el-table-column align="right">
        <!-- eslint-disable -->
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入课程名搜索" />
        </template>
      </el-table-column>
    </el-table>
    <el-descriptions class="margin-top" :column="2" border style="width: 300px; float: right; margin-top: 20px">
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-grid"></i>
          课程数
        </template>
        {{ this.courseList.length }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-data"></i>
          总学分
        </template>
        {{ countCredit }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
export default {
  name: 'StudentCourse',
  computed: {
    countCredit() {
      let res = 0
      this.courseList.forEach((item) => {
        res += item.Credit
      })
      return res
    }
  },
  data() {
    return {
      search: '',
      courseList: []
    }
  },
  async created() {
    const ID = localStorage.getItem('token').split('/')[1]
    const { data: courseData } = await this.$http.post('/getStudentCourse', { ID })
    this.courseList = courseData
  }
}
</script>

<style lang="less" scoped></style>
